<template>
   <div class="list">
        <el-table
        :data="bills"
        style="width: 100%">
        <el-table-column
        prop="address"
        label="房间号"
        width="180">
        </el-table-column>
        <el-table-column
        prop="money"
        label="金额"
        width="180">
        </el-table-column>
        <el-table-column
        prop="bookTime"
        label="预定时间">
        </el-table-column>
        <el-table-column
        prop="endTime"
        label="取消预定时间">
        </el-table-column>
        <el-table-column
        prop="state"
        label="预定状态">
        <template slot-scope="scope">
            <el-tag :type="scope.row.state === 1 ?'info' :'success'">{{ checkState(scope.row.state)  }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button :disabled="scope.row.state ===0 ? false : true" type="text"  @click="cancelBook(scope.row)">取消预定</el-button>
        <el-button :disabled="scope.row.state ===0 ? true : false" type="text"  @click="deleteBook(scope.row.id)">删除</el-button>
        
      </template>
    </el-table-column>
       
        </el-table>

        <div class="pager">
            <el-pagination
            background
            layout="prev, pager, next,total"
            :total="total"
            :page-size="pageData.pageSize"
            @current-change="handlePage">
            </el-pagination>
        </div>

    </div>
</template>

<script>
import {celBook, deleteBook, getBook} from '@/api/book'
export default {
    name:'',
    components: {  },
    data() {
       return {
        bills:[],
        pageData:{
            page: 1,
            pageSize: 11,
      },
      
      total:0,
       }
    },
    computed:{
        
    },
    methods:{
        handlePage(val){
            this.pageData.page = val
            console.log('看看这是什么-----handlePage--',val);
            
            this.getList()
        },  
        getList(){
            let userId = localStorage.getItem('tokenUser')
            let params = {...this.pageData}
            params.userId = userId
            // console.log('预定信息-----》',params);
            getBook({params}).then(({data}) =>{
                // console.log('预定信息-----》',data);
                if(data.code === 1){
                    this.bills = data.data.records
                    this.total = Number(data.data.total)
                }else{
                    this.$message.error(data.msg)
                }
            }).catch(err=>{
                this.$message.error('出现未知错误',err)
                })
        },
        cancelBook(row){
            celBook(row).then(({data}) =>{
                // console.log('取消预定----------',data);
                if(data.code ===1){
                    this.$message.success(data.data)
                    this.getList()
                }else{
                    this.$message.error(data.msg)
                }
                
            })
        },
        checkState(state){
            if(state ===0){
                return '已预定'
            }else if(state === 1){
                return '已取消预定'
            }else if(state === 2){
                return '已完成预定'
            }
        },
        deleteBook(id){
            deleteBook({params:{id}}).then(res => {
            let {data,code,msg} = res.data
            // console.log('删除的数据----',data);

              if(code ===1){
                this.$message.success(data)
                this.getList()
              }else{
                this.$message.error(msg)
              }
              
            })
        }
        
    },
    mounted(){
        this.getList()
    }
}
</script>

<style lang="less" scoped>
  .pager{
    position: absolute;
    bottom: 30px;
    // right: 20px;
    left: 50%;
  }

</style>